<template>
	<view>
		<view class="head">
			<view class="head_left" @tap="back()">
				<image src="../../../static/wode/return.png" mode=""></image>
				<text>返回</text>
			</view>
			<view class="head_mid">
				选择类型
			</view>
			<view class="head_right">
				说明
			</view>
		</view>
		<view class="padding_box">
			<view class="menuBox">
				<view class="menu_item" @tap="selectMenu(index)" v-for="(item,index) in menuList" :class="{fontActive:index===menuIndex}"
				 :key="index">
					{{item}}
					<view v-show="menuIndex===index" class="data-active"></view>
				</view>
			</view>

		</view>
		<view class="listBox">
			<view class="listItem" v-for="(item,index) in listData" :key="index" @tap="selectTheme(item.content)">
				{{item.content}}
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			
			return {
				menuList: ['话题交流', '场景直播'],
				menuIndex: 0,
				listData: "",
				name:'话题交流',
			}
		},
		onShow() {
			this.getList('topic_exchange') 
		},
		methods: {
			back() { //返回
				uni.navigateBack({
					delta: 1
				})
			},
			selectMenu(index) {
				this.menuIndex = index
				if (this.menuIndex == 0) {
					this.getList('topic_exchange')
					this.name='话题交流'
				} else {
					this.getList('scene_broadcast')
					this.name='场景直播'
				}
				uni.setStorageSync('Theme_name',this.name)
			},
			getList(type) {
				var me = this
				var data = {
					type: type
				}
				this.myAjaxNew({
					model: 'user',
					controllerName: 'sceneType',
					actionName: 'query',
					data: data,
					successBack: function(res) {
						console.log(res, '话题')
						me.listData = res.data.data
					}
				})
			},
			selectTheme(item){
				uni.setStorageSync('Theme_name',this.name)
				uni.setStorageSync('Theme_item',item)
				uni.navigateBack({
					delta:1
				})
			}
		}
	}
</script>

<style scoped>
	.head {
		height: 128upx;
		display: flex;
		justify-content: space-between;
		font-size: 32upx;
		padding: 0 24upx;
		background: #ffffff;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 9999;
	}

	.head image {
		height: 36upx;
		width: 20upx;
		margin-right: 9upx;
	}

	.head_left {
		display: flex;
		align-items: center;
		color: #666666;
	}

	.head_mid {
		font-size: 36upx;
		color: #333333;
	}

	.head_right {
		color: #46CECF;
		padding-top: 66upx;
		width: 92upx;
		text-align: right;
	}

	.padding_box {
		padding-top: 148upx;
		background: #F5F5F5;
		z-index: 2000;
		position: fixed;
		width: 100%;
	}

	.menuBox {
		display: flex;
		justify-content: space-around;
		color: #999999;
		font-size: 34upx;
		height: 88upx;
		line-height: 88upx;
		background: #FFFFFF;
	}

	.menu_item {}

	.data-active {
		height: 6upx;
		background-color: #46CECF;
		border-radius: 8upx;
		position: relative;
		top: -4upx;
	}

	.fontActive {
		color: #46CECF;
	}

	.listBox {
		padding-top: 258upx;
		
	}

	.listItem {
		background: #FFFFFF;
		height: 78upx;
		line-height: 78upx;
		text-align: center;
		color: #333333;
		font-size: 28upx;
		border-bottom: 1upx solid #E6E6E6;
		font-weight: bold;
	}
</style>
